<template>
  <div :style="computedStyle">
    <component
      :is="currentComponent"
      :widget-index="index"
      :widgetOptions="widgetData.options"
      :isPreview="true"
      :tenantId="tenantId"
      :isShare="isShare"
    />
  </div>
</template>

<script setup lang="ts">
import { CSSProperties } from 'vue'
import { componentMap } from '../designer/widget/widgetMap'

// props 解构
const props = defineProps<{
  index: number
  widgetData: any
  tenantId?: number
  isShare: boolean
}>()

// 解构 props
const { widgetData } = toRefs(props)

// 根据 currentType 选择正确的组件
const currentComponent = computed(() => {
  return componentMap[widgetData.value.code]
})

const computedStyle = computed<CSSProperties>(() => ({
  position: 'absolute',
  width: widgetData.value.options.position.width + 'px',
  height: widgetData.value.options.position.height + 'px',
  left: widgetData.value.options.position.left + 'px',
  top: widgetData.value.options.position.top + 'px'
}))
</script>

<style lang="scss">
.widget-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00eaff;
  font-size: 26px;
}
</style>
